<template>
  <div class="app-container">
    <div id="data">
      <el-row>
        <el-col :span="20">
          <strong style="line-height: 40px">迭代版本状态详情：</strong>
        </el-col>
        <el-col :span="4">
          <!-- <el-button @click="download" size="medium">导出</el-button> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-radio-group v-model="radio2" size="medium">
            <el-radio-button
              @click.native.prevent="getList('全部', '?tag_type=0')"
              label="全部"
            ></el-radio-button>
            <el-radio-button
              @click.native.prevent="getList('定位', '?tag_type=1')"
              label="定位"
            ></el-radio-button>
            <el-radio-button
              @click.native.prevent="getList('地图', '?tag_type=2')"
              label="地图"
            ></el-radio-button>
            <el-radio-button
              @click.native.prevent="getList('交付', '?tag_type=3')"
              label="交付"
            ></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>

      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="margin-top: 35px; text-align: center"
      >
        <!-- <el-col :span="2">
          <strong>已创建</strong>
        </el-col> -->
        <el-col :span="4">
          <strong>项目集</strong>
        </el-col>
        <!-- <el-col :span="4">
          <strong>项目名称</strong>
        </el-col> -->
        <el-col :span="4">
          <strong>迭代总数</strong>
        </el-col>
        <el-col :span="3">
          <strong>进行中</strong>
        </el-col>
        <el-col :span="3">
          <strong>阻塞中</strong>
        </el-col>
        <el-col :span="3">
          <strong>已完成</strong>
        </el-col>
        <el-col :span="3">
          <strong>Bug数</strong>
        </el-col>
        <!-- <el-col :span="3">
          <strong>历史未解决Bug数</strong>
        </el-col>
        <el-col :span="3">
          <strong>进度</strong>
        </el-col> -->
      </el-row>
      <template v-for="v of iteration_version_status_extension">
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="margin-top: 20px; text-align: center"
          :key="v.project_id"
        >
          <!-- <el-col :span="2">
            <strong>{{ v.version_bug_num.created }}</strong>
          </el-col> -->
          <el-col :span="4">
            <strong>{{ v.project_collection_name }}</strong>
          </el-col>
          <!-- :href="'/#/location/index?id=' + v.project_id" -->
          <!-- <el-col :span="4">
            <a style="color: blue">{{ v.project_name }}</a>
          </el-col> -->
          <el-col :span="4">
            <strong>{{ v.iteration_num }}</strong>
          </el-col>
          <el-col :span="3">
            <strong>{{ v.project_status_running }}</strong>
          </el-col>
          <el-col :span="3">
            <strong>{{ v.project_status_blocked }}</strong>
          </el-col>
          <el-col :span="3">
            <strong>{{ v.project_status_done }}</strong>
          </el-col>
          <el-col class="bugc" :span="3">
            <el-row>
              <el-col :span="16">
                <div class="el-rowb">总数</div>
              </el-col>
              <el-col :span="8">
                <div class="el-rowb">{{ v.version_bug_num.created }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <div class="el-rowb">未解决</div>
              </el-col>
              <el-col :span="8">
                <div class="el-rowb">{{ v.version_bug_num.unsolved }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="16">
                <div class="el-rowb">已解决</div>
              </el-col>
              <el-col :span="8">
                <div class="el-rowb">{{ v.version_bug_num.solved }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <div class="el-rowb">已关闭</div>
              </el-col>
              <el-col :span="8">
                <div class="el-rowb">{{ v.version_bug_num.closed }}</div>
              </el-col>
            </el-row>
          </el-col>
          <!-- <el-col :span="3">
            <strong>{{ v.history_unsolved_bug_total }}</strong>
          </el-col>
          <el-col :span="3">
            <el-progress :percentage="v.project_progress"></el-progress>
          </el-col> -->
        </el-row>
        <hr :key="v.project_id + v.project_name" />
      </template>
    </div>
  </div>
</template>

<script>
import * as projectData from "@/api/projectData";
export default {
  data() {
    return {
      radio: 3,
      radio2: "全部",
      select: null,
      iteration_version_status_extension: [
        {
          project_id: 32,
          project_name: "高精度定位平台",
          iteration_num: 10,
          project_status_running: 0,
          project_status_blocked: 0,
          project_status_done: 10,
          version_bug_num: {
            unsolved: 0,
            created: 28,
            solved: 1,
            closed: 27,
          },
          history_unsolved_bug_total: 0,
          project_progress: 100,
        },
        {
          project_id: 172,
          project_name: "平台算法部",
          iteration_num: 22,
          project_status_running: 1,
          project_status_blocked: 0,
          project_status_done: 20,
          version_bug_num: {
            unsolved: 0,
            created: 163,
            solved: 2,
            closed: 161,
          },
          history_unsolved_bug_total: 0,
          project_progress: 20,
        },
        {
          project_id: 157,
          project_name: "终端部",
          iteration_num: 2,
          project_status_running: 0,
          project_status_blocked: 0,
          project_status_done: 2,
          version_bug_num: {
            unsolved: 0,
            created: 6,
            solved: 0,
            closed: 6,
          },
          history_unsolved_bug_total: 0,
          project_progress: 40,
        },
        {
          project_id: 777,
          project_name: "车端地图引擎部",
          iteration_num: 18,
          project_status_running: 1,
          project_status_blocked: 0,
          project_status_done: 17,
          version_bug_num: {
            unsolved: 21,
            created: 202,
            solved: 29,
            closed: 152,
          },
          history_unsolved_bug_total: 0,
          project_progress: 80,
        },
        {
          project_id: 778,
          project_name: "平台地图引擎部",
          iteration_num: 17,
          project_status_running: 0,
          project_status_blocked: 0,
          project_status_done: 17,
          version_bug_num: {
            unsolved: 0,
            created: 126,
            solved: 4,
            closed: 122,
          },
          history_unsolved_bug_total: 0,
          project_progress: 90,
        },
        {
          project_id: 278,
          project_name: "交付项目集",
          iteration_num: 35,
          project_status_running: 0,
          project_status_blocked: 0,
          project_status_done: 32,
          version_bug_num: {
            unsolved: 14,
            created: 179,
            solved: 12,
            closed: 153,
          },
          history_unsolved_bug_total: 0,
          project_progress: 40,
        },
      ],
    };
  },
  methods: {
    download() {
      let params = [];
      for (let v of this.iteration_version_status_extension) {
        params.push(v.project_id);
      }
      projectData
        .download({
          project_ids: params,
        })
        .then((res) => {
          let blob = res;
          let reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = (e) => {
            let a = document.createElement("a");
            a.download = "project_file.csv";
            a.href = e.target.result;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          };
        });
    },
    async getList(name, params) {
      if (name) this.radio2 = name;
      // projectData
      //   .projectIterationExtension(params)
      //   .then((res) => {
      //     if (res.data.iteration_version_status_extension) {
      //       console.log(res);
      //       this.iteration_version_status_extension =
      //         res.data.iteration_version_status_extension;
      //     }
      //   })
      //   .catch((e) => {
      //     console.log(e);
      //   });
      let res = await projectData.projectIterationExtension(params);
      if (res.data.iteration_version_status_extension) {
        this.iteration_version_status_extension =
          res.data.iteration_version_status_extension;
      }
    },
    // getProjectIterationExtension(params) {
    //   projectData
    //     .projectIterationExtension(params)
    //     .then((res) => {
    //       if (res.data.iteration_version_status_extension) {
    //         this.iteration_version_status_extension =
    //           res.data.iteration_version_status_extension;
    //       }
    //     })
    //     .catch((e) => {
    //       console.log(e);
    //     });
    // },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  /* margin: 20px; */
}
.bugc .el-rowb {
  border: 1px solid rebeccapurple;
  padding: 5px 5px;
}
</style>
